<div class="content-section introduction">
    <div>
        <span class="feature-title">值班管理<span class="gt">&gt;</span>班次设置  </span>
    </div>
</div>

<div class="content-section implementation GridDemo" id="dutySetting">
    <div class="ui-grid ui-grid-responsive ui-grid-pad ui-fluid">
        <div class="ui-grid-row">
            <div>
                <button pButton type="button"  label="新增班次" (click)="displayDialog('add')"></button>
            </div>
        </div>
    </div>

    <p-dataTable [value]="scheduleDatas" [responsive]="true"  [(selection)]="selectShifts">
        <p-column [style]="{'width':'30px'}" selectionMode="multiple" ></p-column>
        <p-column field="color" header="值班颜色" [sortable]="true">
            <ng-template let-bg="rowData" pTemplate="bg">
                <div (click)="test(bg)" [style.width.%]="100"
                      [style.height.%]="100" [style.background]="bg.color" >{{bg.color}}</div>
            </ng-template>
        </p-column>
        <p-column field="name" header="班次名称" [sortable]="true"></p-column>
        <p-column field="sid" header="班次代码" [sortable]="true"></p-column>
        <p-column field="shift_type" header="班次类型" [sortable]="true"></p-column>
        <p-column field="overall_time" header="总时间(h)" [sortable]="true"></p-column>
        <p-column field="begin_time_1" header="开始时间" [sortable]="true"></p-column>
        <p-column field="end_time_1" header="结束时间" [sortable]="true"></p-column>
        <p-column field="status" header="状态" [sortable]="true"></p-column>
        <p-column field="" header="操作" [style]="{'width':'12vw'}">
            <ng-template let-schedule="rowData" pTemplate="operator">
                <button pButton type="button"  (click)="editShifts(schedule)" label="编辑"  ></button>
                <button pButton type="button" *ngIf="schedule.status === '启用'" (click)="freezeOrUnfreeze(schedule)" label="冻结" ></button>
                <button pButton type="button" *ngIf="schedule.status === '冻结'" (click)="freezeOrUnfreeze(schedule)" label="启用" ></button>
                <button pButton type="button"  (click)="view(schedule)" label="查看"  ></button>
                <button pButton type="button"  (click)="deleteShifts(schedule)" label="删除" ></button>
            </ng-template>
        </p-column>
        <ng-template pTemplate="emptymessage">
            当前没有数据
        </ng-template>
    </p-dataTable>
    <p-paginator rows="10" totalRecords="{{total}}" [rowsPerPageOptions]="[10,20,30]"   (onPageChange)="paginate($event)"></p-paginator>
    <!--<p-growl [(value)]="msgs"></p-growl>-->
    <!--<p-growl [(value)]="deletemsgs"></p-growl>-->

    <p-dialog header="{{dialogHeader}}" [(visible)]="display" modal="modal" width="600" (onHide)="onHide()"[responsive]="true">
        <p-messages [(value)]="applymsgs"></p-messages>
        <div class="ui-grid-row">
            <form [formGroup]="shiftForm" class="form-horizontal">
                <div class="form-group">
                    <label class="col-sm-2 control-label">
                        <span ngClass="start_red">*</span>班次名称：</label>
                    <div class="col-sm-10 ui-no-padding-left-15px ui-fluid">
                        <input type="text" pInputText
                               formControlName="name"
                               class="form-control cursor_not_allowed"
                               [(ngModel)]="shiftObj.name"/>
                        <app-field-error-display
                           [displayError]="isFieldValid('name')"
                            errorMsg="不能为空"
                        ></app-field-error-display>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">
                        <span ngClass="start_red">*</span>班次代码：</label>
                    <div class="col-sm-10 ui-no-padding-left-15px ui-fluid">
                        <input type="text" pInputText
                               formControlName="sid"
                               class="form-control cursor_not_allowed"
                               [(ngModel)]="shiftObj.sid"/>
                        <app-field-error-display
                                [displayError]="isFieldValid('sid')"
                                errorMsg="不能为空"
                        ></app-field-error-display>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">
                        <span ngClass="start_red">*</span>班次类型：</label>
                    <div class="col-sm-10 ui-no-padding-left-15px ui-fluid input-padding">
                        <div class="col-sm-5 ui-no-padding-left-15px">
                            <p-radioButton name="group"
                                           value="单班次"
                                           label="单班次"
                                           [(ngModel)]="shiftObj.shift_type"
                                           inputId="preopt3"
                                           (onClick)="dbshift('sg')"
                                           [ngModelOptions]="{standalone: true}">
                            </p-radioButton>
                        </div>
                        <div class="col-sm-5 ui-no-padding-left-15px">
                            <p-radioButton name="group"
                                           value="两头班"
                                           label="两头班"
                                           [(ngModel)]="shiftObj.shift_type"
                                           inputId="preopt4"
                                           (onClick)="dbshift('db')"
                                           [ngModelOptions]="{standalone: true}">
                            </p-radioButton>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">
                        <span ngClass="start_red">*</span>值班时间1：</label>
                    <div class="col-sm-4 ui-fluid-no-padding ui-fluid">
                        <p-calendar [(ngModel)]="beginTime"
                                    [timeOnly]="true"
                                    [showIcon]="true"
                                    [showSeconds]="true"
                                    formControlName="beginTime"
                                    [styleClass]="'schedule-add'"
                                    (onSelect)="computeTime()">
                        </p-calendar>
                        <app-field-error-display
                            [displayError]="isFieldValid('beginTime')"
                            errorMsg="不能为空"
                        ></app-field-error-display>
                    </div>
                    <label class="col-sm-1 control-label"> 至</label>
                    <div class="col-sm-4 ui-fluid-no-padding ui-fluid">
                        <p-calendar [(ngModel)]="endTime"
                                    [timeOnly]="true"
                                    [showIcon]="true"
                                    [showSeconds]="true"
                                    formControlName="endTime"
                                    [styleClass]="'schedule-add'"
                                    (onSelect)="computeTime()">
                        </p-calendar>
                        <app-field-error-display
                                [displayError]="isFieldValid('endTime')"
                                errorMsg="不能为空"
                        ></app-field-error-display>
                    </div>
                </div>
                <div class="form-group" *ngIf="displayTime">
                    <label class="col-sm-2 control-label">
                        <span ngClass="start_red">*</span>值班时间2：</label>
                    <div class="col-sm-4 ui-fluid-no-padding ui-fluid">
                        <p-calendar [(ngModel)]="dbeginTime"
                                    [timeOnly]="true"
                                    [showIcon]="true"
                                    [showSeconds]="true"
                                    [styleClass]="'schedule-add'"
                                    [required]="true"
                                    formControlName="dbeginTime"
                                    (onSelect)="computeTime()">
                        </p-calendar>
                        <app-field-error-display
                                [displayError]="isFieldValid('dbeginTime')"
                                errorMsg="不能为空"
                        ></app-field-error-display>
                    </div>
                    <label class="col-sm-1 control-label"> 至</label>
                    <div class="col-sm-4 ui-fluid-no-padding ui-fluid">
                        <p-calendar [(ngModel)]="dendTime"
                                    [timeOnly]="true"
                                    [showIcon]="true"
                                    [showSeconds]="true"
                                    [styleClass]="'schedule-add'"
                                    [required]="true"
                                    formControlName="dendTime"
                                    (onSelect)="computeTime()">
                        </p-calendar>
                        <app-field-error-display
                                [displayError]="isFieldValid('dendTime')"
                                errorMsg="不能为空"
                        ></app-field-error-display>
                    </div>
                </div>
                <div class="form-group ">
                    <label class="col-sm-2 control-label">
                        <span ngClass="start_red">*</span>总时间(h)：
                    </label>
                    <div class="col-sm-10 ui-no-padding-left-15px">
                        <input type="text" pInputText
                               name="department" placeholder="请选择关联服务目录"
                               readonly
                               [(ngModel)]="shiftObj.overall_time"
                               [ngModelOptions]="{standalone: true}"
                               class="form-control cursor_not_allowed"/>
                    </div>
                </div>
                <div class="form-group ">
                    <label class="col-sm-2 control-label">
                        <span ngClass="start_red">*</span>班次颜色：
                    </label>
                    <div class="col-sm-10 ui-no-padding-left-15px ui-fluid">
                        <p-colorPicker [(ngModel)]="shiftObj.color"
                                       id="colorPicker"
                                       [ngModelOptions]="{standalone: true}">
                        </p-colorPicker>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">
                        <span ngClass="start_red">*</span>状态：</label>
                    <div class="col-sm-10 ui-no-padding-left-15px ui-fluid input-padding">
                        <div class="col-sm-5 ui-no-padding-left-15px">
                            <p-radioButton name="group2"
                                           value="启用"
                                           label="启用"
                                           [(ngModel)]="shiftObj.status"
                                           inputId="preopt1"
                                           [ngModelOptions]="{standalone: true}">
                            </p-radioButton>
                        </div>
                        <div class="col-sm-5 ui-no-padding-left-15px">
                            <p-radioButton name="group2"
                                           value="冻结"
                                           label="冻结"
                                           [(ngModel)]="shiftObj.status"
                                           inputId="preopt2"
                                           [ngModelOptions]="{standalone: true}">
                            </p-radioButton>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <p-footer *ngIf="disableForm">
            <button type="button" pButton icon="fa-check" (click)="addshift()" label="保存"></button>
            <button type="button" pButton icon="fa-close" (click)="cancel()" label="取消" class="ui-button-secondary"></button>
        </p-footer>
    </p-dialog>
    <p-growl [(value)]="msgPop"></p-growl>
</div>
